<template>
  <div>
    <div>
      <img
        style="width: 100%; height: 200px"
        src="../assets/hyg1.webp"
        alt=""
      />
      <div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          background-color="pink"
          text-color="black"
          active-text-color="yellow"
        >
          <el-submenu index="1">
            <template slot="title">购票及特别优惠</template>
            <el-menu-item index="1-1">
              <router-link to="/buyticket"> 购买门票 </router-link>
            </el-menu-item>
            <el-menu-item index="1-2">购买海洋快证</el-menu-item>
            <el-menu-item index="1-3">购买无限FUN入场证</el-menu-item>
            <el-menu-item index="1-4">特别优惠</el-menu-item>
            <el-menu-item index="1-5">伙伴酒店套餐</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <router-link to="/introduce">公园精彩体验</router-link>
              </template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3">酒店住宿</el-menu-item>
          <el-menu-item index="4">智纷全年入场证</el-menu-item>
          <el-menu-item index="5">筹办活动</el-menu-item>
          <el-menu-item index="6">教育与保障</el-menu-item>
          <el-menu-item index="7">公园资料</el-menu-item>
          <el-menu-item index="8">网上预约</el-menu-item>
        </el-menu>
      </div>
      <div>
          <router-view></router-view>
       </div>   
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },
};
</script>

<style lang="scss" scoped>
el-menu-item:hover{
  background-color: rgb(99, 140, 17) !important;
}
</style>